<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2016/12/7
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="OEE等性能参数的历史趋势"/>
</jsp:include>

<jsp:include page="../../include/admin_header.jsp"/>
<jsp:include page="../../include/admin_sidebar.jsp"/>

<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display:inline-block">OEE等性能参数的历史趋势</h4>
    </section>
    <section class="content" style="min-height:0px">
        <%--折线图选项条--%>
        <div style="width:100%;border:1px solid #cdd9e1;background-color:#fff">
            <div style="width: 100%;border:1px solid #cdd9e1;background-color: #fff;padding-bottom: 20px;">
                <div class="row sie-chart-title">
                    <div class="sie-title-des">OEE and so on</div>
                    <div class="sie-chart-btn">
                        <div style="display: inline-block">
                            <a id="exportSubmit" href="javascript:;" class="hollow-button-green hidden" style="line-height: 2.5;" onclick="exportExcel()"><spring:message code="label.export.data"/></a>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px 15px 15px  50px;">
                    <div class="row">
                        <div class="col-md-2">
                            <label style="min-width: 50px;">租户:</label>
                            <select id="select_tenant" class="form-control" style="max-width: 150px;height: 30px;padding: 0 2px;border-radius:5px;display: inline-block"
                                    onchange="tenantChange(this,'service')">
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">类型:</label>
                            <select id="type" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">型号:</label>
                            <select id="model" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">组:</label>
                            <select id="group" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">流水线:</label>
                            <select id="line" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <%--<div class="col-md-2">--%>
                            <%--<label style="min-width: 50px;">&nbsp;</label>--%>
                            <%--<a id="search" href="javascript:;" class="solid-button-orange">查找</a>--%>
                        <%--</div>--%>
                    </div>
                </div>
                <div style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="display: inline-block;color:#000;font-size:14px"><spring:message
                            code="label.choice.device"/> :
                    </div>
                    <div style="display: inline-block;display:-ms-inline-flexbox;margin-bottom: 5px;">
                        <select id="select_device" class="form-control"
                                style="max-width:200px;min-width:100px;min-height: 20px;max-height: 30px;padding: 0px 2px;border-radius:5px;"
                                onchange="deviceChange(this)">

                        </select>
                    </div>
                    <div style="display: inline-block">
                        <a href="javascript:;" class="hollow-button-green" style="line-height: 2.5;" onclick="showReset('','#rf_reset','indexContrast_select','service')"><spring:message
                                code="label.contrast"/></a>
                    </div>
                </div>
                <%--line--%>
                <%--(原 可选)--%>
                <%--<div class="chartContainer hidden" style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;">--%>
                <div class="hidden"
                     style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="width: 100%;height: 30px;color:#000" id="indexparam">
                        <div class="radio selected" data-name="oee">OEE</div>
                        <div class="radio" data-name="availability">AVAILABILITY</div>
                        <div class="radio" data-name="quality">QUALITY</div>
                        <div class="radio" data-name="performance">PERFORMANCE</div>
                    </div>
                </div>
                <div class="chartContainer hidden"
                     style="padding:10px 15px 10px 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="width: 100%;line-height: 2.4;border-radius:10px;display: -webkit-box;">
                        <a href="javascript:;" class="sie-date-btn btn-selector" id="service_week"
                           onclick="changeDate(this)">
                            <spring:message code="label.one.week"/>
                        </a>
                        <a href="javascript:;" class="sie-date-btn" id="service_month" onclick="changeDate(this)">
                            <spring:message code="label.one.month"/>
                        </a>
                        <a href="javascript:;" class="sie-date-btn" id="service_year" onclick="changeDate(this)">
                            <spring:message code="label.one.year"/>
                        </a>

                        <div style="display:inline-block;display:-ms-inline-flexbox;">
                            <div class="sie-calendar-parent">
                                <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker"
                                       placeholder='<spring:message code="label.start.time"/>'
                                       id="service_start_time">
                                <img src="/images/calendar.png" class="sie-calendar-img">
                            </div>
                            <div class="sie-calendar-parent">
                                <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker"
                                       placeholder='<spring:message code="label.end.time"/>' id="service_end_time">
                                <img src="/images/calendar.png" class="sie-calendar-img">
                            </div>
                            <a href="javascript:;"
                               style="width: 50px;height: 30px;line-height: 34px;margin-left: 15px;border-radius: 5px;color:#fff;background-color: #41aaaa;display: inline-block;text-align: center;"
                               id="service_date_submit" onclick="indexServicesLineChart(this)">
                                <span><spring:message code="label.admin.confirm"/></span>
                            </a>
                        </div>
                    </div>
                </div>
                <div id="serviceLine" style="padding: 20px 20px 0 20px;">

                </div>
                <div id="rangeSelector" style="padding: 0 20px 20px 20px;">

                </div>
            </div>
        </div>
    </section>
</div>

<div id="rf_reset" class="hidden"
     style="padding: 26px;width:370px;height:474px;border-radius: 10px;border: 1px solid #ccd7df">
    <div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;"><spring:message
                    code="label.device.type"/>:</label>

            <div class="col-md-8" style="padding: 0 0">
                <input id="deviceType" class="form-control sie-input-border sie-input-uwh"
                       style="margin-top: 5px;padding: 0 12px;background-color: #fff;" value="${device.deviceType}" disabled="disabled">
            </div>
        </div>

        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;"><spring:message
                    code="label.device.model"/>:</label>

            <div class="col-md-8" style="padding: 0 0">
                <input id="deviceModel" class="form-control sie-input-border sie-input-uwh"
                       style="margin-top: 5px;padding: 0 12px;background-color: #fff;" value="${device.deviceModel}" disabled="disabled">
            </div>
        </div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;">租户:</label>

            <div class="col-md-8" style="padding: 0 0">
                <select id="tenants" class="form-control sie-input-border sie-input-uwh" style="margin-top: 5px;padding: 0 12px;border-radius:5px;display: inline-block" onchange="loadAdminAlertData()">

                </select>
            </div>
        </div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 5px;padding-left: 0;padding-right: 10px;">组:</label>

            <div class="col-md-8" style="padding: 0 0">
                <select id="deviceGroup" class="form-control sie-input-border sie-input-uwh" style="margin-top: 5px;padding: 0 12px;border-radius:5px;display: inline-block" onchange="loadAdminAlertData()">

                </select>
            </div>
        </div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;">流水线:</label>

            <div class="col-md-8" style="padding: 0 0">
                <select id="deviceLine" class="form-control sie-input-border sie-input-uwh" style="margin-top: 5px;padding: 0 12px;border-radius:5px;display: inline-block" onchange="loadAdminAlertData()">

                </select>
            </div>
        </div>
        <div id="device_checkbox" class="col-md-12 scrollbar sie-flex-container"
             style="margin-top:10px;height: 180px;overflow: auto;">

        </div>
        <div style="width: 100%;text-align: center">
            <button id="contrast_select_sure" class="btn"
                    style="width: 70px;font-size: 12px;background-color: #50bed7;height: 25px;padding: 0;margin-top: 28px;column-rule: #fff;">
                <spring:message code="label.admin.confirm"/>
            </button>
        </div>
    </div>
</div>

<jsp:include page="../../include/foot.jsp"/>
<script src="/../js/dx.all.js"></script>
<script src="/../js/charts.js"></script>

<script>
    var exportData = {};
    $(document).ready(function () {
        $("#service_start_time").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate: new Date("2016-11-01"),
            endDate: new Date(dateAddSubtract(new Date(), -1)),
            todayHighlight:true
        }).on('changeDate', function (ev) {
            $("#service_end_time").datepicker('setStartDate', ev.date)
        });
        bindDateInputClickEvent();
        $("#service_end_time").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate: new Date("2016-11-01"),
            endDate: new Date(dateAddSubtract(new Date(), -1)),
            todayHighlight:true
        }).on('changeDate', function (ev) {
            $("#service_start_time").datepicker('setEndDate', ev.date)
        });

        $("#search").click(function(){
           adminSearchClick();
        });
        adminLoadTenantForChart();
    });

    function tenantChange(dom, prefix) {
        $("#exportSubmit").addClass("hidden");
        $('#select_device').empty();
        $(".chartContainer").addClass("hidden");
        $("#device_checkbox").find(".item-checked").removeClass("item-checked");
        createIndexServicesLineChart([], []);
        if ($("#select_tenant").find("option:selected").data("option") == "first") {
            $(".sie-other-condition").attr("disabled",true);
            $("#type").html("");
            $("#model").html("");
            $("#group").html("");
            $("#line").html("");
            $("#type").attr("disabled","disabled");
            $("#model").attr("disabled","disabled");
            $("#group").attr("disabled","disabled");
            $("#line").attr("disabled","disabled");
            return;
        }
        adminLoadDeviceOtherForChart();
    }

    function deviceChange(dom) {
        $("#exportSubmit").addClass("hidden");
        $(".btn-selector").removeClass("btn-selector");
        $("#service_week").addClass("btn-selector");
        $("#device_checkbox").find(".item-checked").removeClass("item-checked");

        $("#service_start_time").val(dateFormat(dateAddSubtract(new Date(), -7)));
        $("#service_end_time").val(dateFormat(dateAddSubtract(new Date(), -1)));
        $("#service_start_time").datepicker('update');
        $("#service_end_time").datepicker('update');
        $(".radio").removeClass("selected");
        $($(".radio")[0]).addClass("selected");
        createIndexServicesLineChart([], []);

        if ($("#select_device").find("option:selected").data("option") == 'first') {
            $(".chartContainer").addClass("hidden");
            return;
        }
        $(".chartContainer").removeClass("hidden");
        $("#deviceType").val($("#select_device").find("option:selected").data("devicetype"));
        $("#deviceModel").val($("#select_device").find("option:selected").data("devicemodel"));
        loadAdminAlertLineAndGroupData();
        loadAdminAlertData();
        indexServicesLineChart(dom);
    }

    function changeDate(dom) {
        $("#exportSubmit").addClass("hidden");
        $(".btn-selector").removeClass("btn-selector");
        $(dom).addClass("btn-selector");

        if (dom.id == "service_week") {
            $("#service_start_time").val(dateFormat(dateAddSubtract(new Date(), -7)));
            $("#service_end_time").val(dateFormat(dateAddSubtract(new Date(), -1)));
            $("#service_start_time").datepicker('update');
            $("#service_end_time").datepicker('update');
        } else if (dom.id == "service_month") {
            $("#service_start_time").val(dateFormat(dateAddSubtract(new Date(), -30)));
            $("#service_end_time").val(dateFormat(dateAddSubtract(new Date(), -1)));
            $("#service_start_time").datepicker('update');
            $("#service_end_time").datepicker('update');
        } else if (dom.id == "service_year") {
            $("#service_start_time").val(dateFormat(dateAddSubtract(new Date(), -365)));
            $("#service_end_time").val(dateFormat(dateAddSubtract(new Date(), -1)));
            $("#service_start_time").datepicker('update');
            $("#service_end_time").datepicker('update');
        }
        indexServicesLineChart(dom);
    }

    function indexServicesLineChart(dom) {
        $("#exportSubmit").addClass("hidden");
        if ($("#service_start_time").val() == "" || $("#service_end_time").val() == "") {
            swal({
                title: "<spring:message code="label.warning"/>",
                text: '<spring:message code="label.please.choice.date"/>',
                type: "warning",
                showCancelButton: false,
                showConfirmButton: true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation: "slide-from-top"
            }, function () {
                $("#exportSubmit").addClass("hidden");
                createIndexServicesLineChart([], []);
                return;
            });
        }

        if (dom.id == "service_date_submit") {
            $(".btn-selector").removeClass("btn-selector");
        }

        var data = {};

        //获取开始时间和结束时间
        data["startTime"] = $("#service_start_time").val();
        data["endTime"] = $("#service_end_time").val();

        var series = [];
        var indexParam = $("#indexparam").find(".selected").data("name");
        data["tenantAndDevice"] = [{
            tenantId: $("#select_tenant").find("option:selected").data("tenantid"),
            deviceId: $("#select_device").find("option:selected").data("deviceid"),
            deviceName: $("#select_device").find("option:selected").data("devicename")
        }];

        series = [{
            valueField: $("#select_device").find("option:selected").text().trim(),
            name: $("#select_device").find("option:selected").text().trim()
        }];

        if ($("#device_checkbox").find(".item-checked").length != 0) {
            var $checkboxs = $("#device_checkbox").find(".item-checked").find("a");
            for (var i = 0; i < $checkboxs.length; i++) {
                var serie = {};
                data["tenantAndDevice"].push({
                    tenantId: $($checkboxs[i]).data("tenantid"),
                    deviceId: $($checkboxs[i]).data("deviceid"),
                    deviceName: $($checkboxs[i]).data("devicename")
                });   //id
                serie["valueField"] = $($checkboxs[i]).data("devicename");  //name
                serie["name"] = $($checkboxs[i]).data("devicename");
                series.push(serie);
            }
        }
        console.log(data);
        exportData = data;

        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/admin/api/v1/serviceContrastNew",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (result) {
                    dtd.resolve();
                    var dataSource = [];
                    if (result.result != "SUCCESS" || result.data == null) {
                        createIndexServicesLineChart(dataSource, series);
                        dtd.resolve();
                        return;
                    }

                    var service = result.data;
                    for (var j = 0; j < service.length; j++) {
                        var copy = {};
                        if (dataSource.length == 0) {
                            copy["time"] = service[j]["date_id"];
                            copy[service[j]["deviceName"]] = service[j][indexParam];
                            dataSource.push(copy);
                        } else {
                            for (var i = 0; i < dataSource.length; i++) {
                                if (dataSource[i].time == service[j]["date_id"]) {
                                    dataSource[i][service[j]["deviceName"]] = service[j][indexParam];
                                    break;
                                } else if (i == (dataSource.length - 1)) {
                                    copy["time"] = service[j]["date_id"];
                                    copy[service[j]["deviceName"]] = service[j][indexParam];
                                    dataSource.push(copy);
                                    break;
                                }
                            }
                        }
                    }
                    createIndexServicesLineChart(dataSource, series);
                    $("#exportSubmit").removeClass("hidden");
                    dtd.resolve();
                },
                error: function (e) {
                    dtd.resolve();
                    console.log(e);
                }
            });
        });
        hidePopup();
    }

    //获取机床 根据 机床type 和机床 model
    function getDevicesByTypeAndModel() {
        $("#device_checkbox").empty();
        $.ajax({
            url: '/admin/api/v1/getDevicesByTypeAndModel',
            type: 'get',
            data: {
                type: $("#deviceType").val(),
                model: $("#deviceModel").val()
            },
            success: function (data) {
                if (data.data.length == 0) {
                    return;
                }
                $.each(data.data, function (index, device) {
                    if (device.device_id != $("#select_device").find("option:selected").data("deviceid")) {
                        var $div;
                        if ($("#device_checkbox").find("#" + device.tenant_id).length != 0) {
                            $div = $("<div></div>").addClass("col-md-6 sie-flex-item item-access").attr("onclick", "addcheckd(this)").append(
                                    $("<a></a>").addClass("sie-checkbox checked").attr("data-deviceid", device.device_id).attr("data-devicename", device.device_unique_id).attr("data-tenantid", device.tenant_id).attr("style", "margin-left: 15px;")).append(
                                    $("<span></span>").attr("style", "margin-left:5px;").text(device.device_unique_id));
                            $("#device_checkbox").find("#" + device.tenant_id).append($div);
                        } else {
                            $div = $("<div></div>").attr("id", device.tenant_id).addClass("row").attr("style", "margin-top:5px;").append(
                                    $("<div></div>").addClass("col-md-12").attr("style", "text-align: left;margin-bottom: 5px;font-weight: 600;").append(
                                            $("<span></span>").text(/*device.tenantName + "："*/))).append(
                                    $("<div></div>").addClass("col-md-6 sie-flex-item item-access").attr("onclick", "addcheckd(this)").append(
                                            $("<a></a>").addClass("sie-checkbox checked").attr("data-deviceid", device.device_id).attr("data-devicename", device.device_unique_id).attr("data-tenantid", device.tenantId).attr("style", "margin-left: 15px;")).append(
                                            $("<span></span>").attr("style", "margin-left:5px;").text(device.device_unique_id)));
                            $("#device_checkbox").append($div);
                        }
                    }
                });
            },
            error: function (data) {
                console.log("error");
            }
        });
    }

    function showReset(title, contentElement, onpresent, prefix) {
        if ($("#select_device").find("option:selected").length == 0 || $("#select_device").find("option:selected").data("option") == 'first') {
            swal({
                title: "<spring:message code="label.warning"/>",
                text: '<spring:message code="label.please.choice.device"/>',
                type: "warning",
                showCancelButton: false,
                showConfirmButton: true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation: "slide-from-top"
            }, function () {
                return;
            });
        } else {
            showPopup('', contentElement, onpresent, prefix);
        }
    }

    function addcheckd(_this) {
        if ($("#device_checkbox").find(".item-checked").length < 5) {
            $(_this).hasClass("item-checked") == true ? $(_this).removeClass("item-checked") : $(_this).addClass("item-checked");
        } else if ($(_this).hasClass("item-checked") == true) {
            $(_this).removeClass("item-checked");
        }
    }

    //选择机床对比
    $("#contrast_select_sure").click(function () {
        if ($(this).data("id") == "indexContrast_select") {
            indexServicesLineChart(this);
        } else if ($(this).data("id") == "indexContrast_shift_select") {
            indexServicesShiftLineChart(this);
        }
    });

    function exportExcel() {
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/admin/api/v1/OEECompareExport",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(exportData),
                success: function (reasult) {
                    if (reasult.data == null || reasult.data == "" || reasult.data == undefined) {
                        dtd.resolve();
                        alert("daochushibai")
                    } else {
                        dtd.resolve();
                        window.location.href = "/api/v1/excel/get?name=" + reasult.data;
                    }
                },
                error: function () {
                    dtd.resolve();
                }
            })
        });
    }
</script>